<template>
  <div class="visitors">
    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">
        <span style="margin-left: 20px; margin-right: 6px;">统计数据-起始日期:</span>
        <iDatePicker :showTime="false" style="margin-left: 10px;" v-model="start_date"></iDatePicker>
        <a-button type="primary" @click="handleBlockedIpLog()" style="margin-left:60px;">拉黑用户 {{blocked_user_num}} 人，涉及wifi-ip {{blocked_ip_count}} 个，点击查看这些ip登录过的用户列表</a-button>
      </div>
    </div>

    <a-table
      class="table"
      :rowKey="row => row.uuid"
      :dataSource="list"
      :pagination="pagination"
      :loading="loading"
      @change="onPaginationChange"
    >

      <a-table-column title="城市名称">
        <template slot-scope="row">
          <span>{{ row.city || row.province }}</span>
        </template>
      </a-table-column>
      
      <a-table-column title="会员数量">
        <template slot-scope="row">
          <span>{{ row.user_count }}</span>
        </template>
      </a-table-column>
      
      <a-table-column title="查看同城 - 会员数据">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleIpLog(row.city)" v-if="row.city">IP记录</a>
        </template>
      </a-table-column>
    </a-table>
    <a-modal title="同城会员 - ip记录" style="top: 100px;" :visible="isIpLog" width="1400px" @cancel="isIpLog = false" :footer="null">
      <Iplog v-if="isIpLog" :start_date="start_date" :search_city="search_city" @cancel="isIpLog = false" @success="fetchData"></Iplog>
    </a-modal>
    
    <a-modal title="拉黑用户 - ip记录" style="top: 100px;" :visible="isBlockedIpLog" width="1400px" @cancel="isBlockedIpLog = false" :footer="null">
      <BlockedIplog v-if="isBlockedIpLog" :start_date="start_date" @cancel="isBlockedIpLog = false" @success="fetchData"></BlockedIplog>
    </a-modal>
  </div>
</template>
<script>
import { getAreaCount } from '@/api/visitors'
import moment from 'moment'
import IDatePicker from "@/components/IDatePicker/IDatePicker.vue"
import Iplog from "./components/Iplog.vue"
import BlockedIplog from "./components/BlockedIplog.vue"

export default {
  name: 'Visitors',
  components: {
    IDatePicker,
    Iplog,
    BlockedIplog
  },
  data () {
    return {
      pageSizeOptions: ['15', '30', '45', '60', '75'],
      loading: false,
      list: [],
      page: 1,
      per_page: 15,
      total: 0,
      key: '',
      start_date: '',
      blocked_user_num: 0,
      blocked_ip_count: 0,
      change_date_count: 0,
      isIpLog: false,
      isBlockedIpLog: false,
    }
  },
  computed: {
    pagination () {
      return {
        defaultPageSize: this.per_page,
        defaultCurrent: this.page,
        total: this.total,
        pageSizeOptions: this.pageSizeOptions,
        showSizeChanger: true
      }
    }
  },
  watch: {
    start_date () {
      if (this.change_date_count > 0 && this.start_date != '') {
        this.refresh()
      }
      this.change_date_count++
    }
  },
  filters: {
    formatDate (value) {
      return value ? moment(value).fromNow() : ''
    },
    formatDate2 (value) {
      return value ? moment(value).format('YYYY-MM-DD') : ''
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    refresh () {
      this.page = 1
      this.fetchData()
    },
    onPaginationChange (e) {
      this.page = e.current
      this.per_page = e.pageSize
      this.fetchData()
    },
    handleIpLog(city){
      this.isIpLog = true;
      this.search_city = city;
    },
    handleBlockedIpLog(){
      this.isBlockedIpLog = true;
    },
    fetchData () {
      this.loading = true
      getAreaCount({
        page: this.page,
        per_page: this.per_page,
        start_date: this.start_date
      }).then(res => {
        this.list = res.data.list
        this.total = res.data.item_total
        this.start_date = res.data.start_date
        if (this.page == 1) {
          this.blocked_user_num = res.data.blocked_user_num
          this.blocked_ip_count = res.data.blocked_ip_count
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.visitors {
  background-color: #fff;
}

.table {
  width: 98%;
}

.headimg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.head {
  display: flex;
  align-items: center;

  .head-url {
    width: 30px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%
    }
  }
}
</style>
